<template>
  <van-tabbar v-model="active" @change="onChange" fixed>
    <van-tabbar-item icon="wap-home-o" to="/">
      首页
    </van-tabbar-item>
    <van-tabbar-item icon="plus" to="/upload">
      上传
    </van-tabbar-item>
    <van-tabbar-item icon="share-o" to="/share">
      分享
    </van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/profile">
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const active = ref(0)

// 根据当前路由设置激活的tab
const setActiveTab = () => {
  const path = route.path
  if (path === '/' || path.startsWith('/files')) {
    active.value = 0
  } else if (path === '/upload') {
    active.value = 1
  } else if (path === '/share') {
    active.value = 2
  } else if (path === '/profile' || path === '/settings') {
    active.value = 3
  }
}

// 监听路由变化
watch(() => route.path, setActiveTab, { immediate: true })

// Tab切换处理
const onChange = (index: number) => {
  active.value = index
}
</script>

<style scoped>
:deep(.van-tabbar) {
  background-color: #fff;
  border-top: 1px solid #ebedf0;
}

:deep(.van-tabbar-item__text) {
  font-size: 12px;
}
</style>